<template>
<div >
<header>
  <div class="col-12 m-0 p-0 mb-2">
    <img src="static/img/food2.png" class=" m-0 p-0" height="240" width="100%">
  </div>
</header>

  <div >
     <!-- 头部商品信息 -->
    <div class="container-fluid">
    <div class="row">
      <!--商品信息-->
    <div class="col-6 ml-2 mt-3" align="left">
      <span><h5><strong>脆皮烧鸭饭</strong></h5></span>

      <div id="foodDetails" valign="top" class="mb-1">

      <span><small>酸辣</small></span>&nbsp;<span><small>鸭肉</small></span></div>
      <span id="sales_volume" class="mb-1">门店销量第一名</span>
      <br>
      <small style="color: #A2A2A2" class="ml-1" >月售100</small>&nbsp;<small style="color: #A2A2A2" >赞:9</small>
    </div>
      <div class="col-5 mt-3 ml-3" align="right">
        <div style="text-align: center">
        <i class="bi bi-star h5"></i>
        <p>点赞</p></div>
      </div>

    </div>
   </div>
     <!--  底部价格与规格选择  -->
    <div class="container-fluid ">
      <div class="row ">
      <!--左边信息-->
      <div class="col-6 mt-2 ml-2" align="left" style="color: #EB4E54">
       <strong style="font-size: 18px">￥</strong> <strong style="font-size: 26px">20.99</strong>
        <small style="color: #A2A2A2">起</small>

      </div>
      <!--右边信息-->
      <div class="col-5 ml-2" align="right" valgin="bottom">

        <!--规格按钮-->
        <button id="guige" type="button" class="btn btn-warning mt-2" data-toggle="modal" data-target="#exampleModal">
          <small>选规格</small>
        </button>

        <!-- 详细信息 -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" align="left">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><strong style="color: black">脆皮烧鸭饭</strong></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body m-0 p-0" align="">
                <div class="col-12">
                  <small style="color: #A2A2A2">规格</small>
                </div>

                <div class="mt-2">
                  <label class="btn btn-outline-warning btn-sm col-3 ml-3 " >
                    <input type="radio" name="options" id="option1" style="display:none"> 小份
                  </label>
                  <label class="btn btn-outline-warning btn-sm col-3 ml-3 ">
                    <input type="radio" name="options" id="option2" style="display:none" > 中份
                  </label>

                  <label class="btn btn-outline-warning btn-sm col-3 ml-3 ">
                    <input type="radio" name="options" id="option3" style="display:none" > 大份
                  </label>
                </div>

                <div class="col-12">
                  <small style="color: #A2A2A2">口味</small>
                </div>
                <div class="mt-2">
                  <label class="btn btn-outline-warning btn-sm col-3 ml-3 " >
                    <input type="radio" name="options" id="kouwei1" style="display:none"> 暂无
                  </label>
                </div>

              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-warning" v-show="!flag" v-on:click="button_hide" ><i class="bi bi-cart-plus h5"></i>&nbsp;加入购物车</button>
                <div wdith="50%" v-show="flag">
                  <b-form-spinbutton id="demo-sb"   v-model="value" min="1s" max="100"></b-form-spinbutton>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      </div>
    </div>
     <!-- 规格</div>   -->
    <br>
  </div>

  <!--商品详情-->
  <div class="container-fluid m-0 p-0 ">
    <div class="card" >
      <div class="card-body" align="left" valgin="top">

        <div>
          <b-tabs content-class="mt-3" fill  >
            <b-tab title="详情"  active>
              <div class="m-0 p-0 form-inline" style="color: #666" valign="top" id="Product_introduction">
                <div class="col-3 m-0 p-0" align="left" >掌柜描述：</div>
                <div class="col-9 m-0" align="left">
                 脆皮烧鸭是烧腊饭的一种,广东省的一道传统菜,属于粤菜。菜品色泽金黄,酥脆鲜香,搭配烧鸭灵魂酸梅酱,口味再次上升一个高度
                </div>

                <div class="col-3 m-0 p-0 mt-1" align="left">主料：</div>
                <div class="col-9 m-0 mt-1" align="left">鸭肉</div>

                <div class="col-3 m-0 p-0 mt-1" align="left">分量：</div>
                <div class="col-9 m-0 mt-1" align="left">一人份</div>

                <div class="col-3 m-0 p-0 mt-1" align="left">价格说明：</div>
                <div class="col-9 m-0 mt-1" align="left" >暂无</div>
              </div>
            </b-tab>
            <b-tab title="评论">
              <p>暂无评价</p>
            </b-tab>
          </b-tabs>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid m-0 p-0">
    <div class="card mt-3 ">
      <div class="card-body">
        <img src="static/img/songcan.png"  class="img-rounded" style="border-radius:8px" width="100%">
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "ProductDetails"
}
</script>

<style scoped>

/* 商品简介标签样式*/
#foodDetails span{
  display:inline-block;height: 16px;width: 36px; background-color: #F2F2F2;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  text-align: center;
  font-size: 12px
}
/* 销量排行标签样式*/
#sales_volume{
  display:inline-block;height: 17px;width: 100px; background-color: #F2F2F2;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  text-align: center;
  font-size: 12px;
  color: #D39147;
  background-color: #FDF6D9;
}

/* 选规格按钮样式*/
#guige{
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
  height: 28px;
  text-align: center;
  line-height: 0px;
  width: 120px;

}
/* 选规格按钮字体样式*/
#guige small{

  line-height: 0px;
}
/* 商品详情字体样式*/
#Product_introduction{
  font-size: 15px;
}
</style>
